The approaches described in this section are approaches that could be pursued, but are not necessarily approaches that have been previously conceived or pursued. Therefore, unless otherwise indicated, it should not be assumed that any of the approaches described in this section qualify as prior art merely by virtue of their inclusion in this section.
Modern webpages are frequently designed using templates, commonly referred to as wireframes, that supply the layout of elements for a series of pages in a particular domain. Wireframes are often completed before content is developed, and once completed, can provide a visual reference upon which to structure each page. Benefits of developing websites using wireframes include allowing for variations of webpages throughout a site to have a consistent layout as well as eliminating the need for redeveloping redundant portions of webpages. For example, YAHOO® might develop a wireframe for its real estate sections so that the real estate home pages for Yahoo.com, uk.Yahoo.com, fr.Yahoo.com, and all of YAHOO's® other real estate home pages have the same layout. FIG. 1 is an example of a layout that a wireframe might implement. The layout might generally include a header block 101, a property searching block 102, a mortgage information block 103, an advertisement block 104, a news feed block 105, various blocks 106 and 107, and a footer block 108.
Web developers for each of the real estate home pages can then add unique content to each block in wireframes. For example, a web developer for Yahoo.com can add English titles to the header block 101, while the developer for fr.Yahoo.com might add French titles to the header block 101. A web developer for uk.yahoo.com might add a property search module configured to search a database of United Kingdom property listings to the property search block 102 while a web developer for Yahoo.com adds a property search module configured to search a database of United States listings, and so on.
After adding the content, web developers can utilize tools to validate the content of the page to determine if the coding such as the hypertext markup language (HTML) or extensible markup language (XML) markup is correct, but such tools do not validate that the layout of the page will be correct when the webpage is rendered by an internet browser such as Internet Explorer®, Firefox®, or Safari®. For example, if a news feed module added to the news feed block 105 is too large, it might cause the news feed block 105 to overlap with the mortgage information block 103 when the page is rendered by an internet browser. Mistakes to a page's layout can occur under many different circumstances, but common situations include site redesigning and site localizing. For example, when redesigning a site a new module might replace an older module in a particular block, and the new module might cause a block to expand and overlap with another block. Additionally, when localizing sites, translations can cause blocks to expand. For example, a block containing a date might be configured for an English language format that has a maximum number of characters, but when translated into a date format of a different language, that maximum number of characters might be exceeded causing the block to expand and overlap with another block.
Currently, validating the layout of a webpage is done manually which can be both difficult and time consuming. Additionally, mistakes in layout might not be readily identifiable to the human eye because the boundaries of different blocks might not be discernible and only under certain circumstance will the overlapping of blocks cause overlapping of content. Unlike the example of FIG. 1 which shows clear borders for each block, in many webpages, the borders of the different blocks are not shown, and each block might have the same background color, making the borders of blocks indistinguishable.
For example, the news feed block 105 and mortgage information block 103 might have a common background color such that the boundaries of the blocks are not identifiable to the human eye. Additionally, the newsfeed block 105 might be configured to display a date that has a maximum number of characters. When implementing the wireframe into a German language site, however, the date might sometimes, for example only on particular days or in a particular month, exceed the maximum number of characters causing the content of the newsfeed block 105 to overlap with the content of the mortgage information block 103 when rendered by an internet browser.
Based on the foregoing, there exists a need for an improved means of validating a webpage's layout.